<template>
  <div class="week">
    <div class="week-head">
      <p>所选择的课程将会在客户端【每周精选】栏目中显示，最多选择三门。</p>
    </div>
    <!-- 已经选择课程 -->
    <div class="week-main">
      <div v-for="(item, index) in classData" :key="index" class="week-img">
        <div class="grid-body" @mouseenter="item.showClose = true" @mouseleave="handleLeave(item)">
          <img :src="item.pictureUrl" alt class="img">
          <span class="title">{{ item.courseTitle }}</span>
          <i v-if="item.showClose" class="el-icon-error" @click="handleClickDelete(index)"/>
        </div>
      </div>
      <div v-if="resultLength < 3" class="week-button">
        <el-button style="width:100%;height:100%;">
          <i class="el-icon-circle-plus" @click="appendData"/>
        </el-button>
      </div>
    </div>
    <div>
      <el-button type="primary" style="margin-top:30px" @click="saveInfo">提交</el-button>
    </div>

    <course-dialog
      :dialog="dialog"
      :dialog-data="dialogData"
      @changeVisiable="changeVisiable"
      @handleClickSelect="handleClickSelect"
      @handleSearch="handleSearch"
    />
  </div>
</template>

<script>
import courseDialog from './dialog'
import { getSelections, saveSelections, getCourseList } from '@/api/operate/mbcontent' // 数据接口
import { getTenantId, getUserId } from '@/utils/auth'
export default {
  components: {
    courseDialog
  },
  data() {
    return {
      dialog: false,
      dialogData: {
        search: '',
        currentpage: 1,
        pagesize: 5,
        total: 0,
        subject: []
      },
      classData: []
    }
  },
  computed: {
    resultLength() {
      return this.classData.length
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    changeVisiable(val) {
      this.dialog = val
    },
    handleClickDelete(index) {
      this.classData.splice(index, 1)
    },
    handleLeave(item) {
      const _item = item
      setTimeout(() => {
        _item.showClose = false
      }, 50)
    },
    handleClickSelect(item) {
      let flag = false
      if (this.classData.length < 3) {
        this.classData.forEach(data => {
          if (data.courseId === item.id) {
            this.$message.error('每周精品栏目中已经存在此门课程！')
            flag = true
          }
        })
        if (!flag) {
          const saveData = { showClose: false }
          saveData.courseId = item.id
          saveData.courseTitle = item.title
          saveData.pictureUrl = item.middlePicture
          this.classData.push(saveData)
          this.dialog = false
        }
      }
    },
    handleSearch(val, page, pagesize) {
      this.dialogData.currentpage = page
      this.dialogData.pagesize = pagesize
      this.dialogData.search = val
      this.getCourseList()
    },
    appendData() {
      this.dialog = true
      this.getCourseList()
    },
    getCourseList() {
      const params = {}
      params.page = this.dialogData.currentpage
      params.pageSize = this.dialogData.pagesize
      params.name = this.dialogData.search
      params.tenantId = getTenantId()
      getCourseList(params).then(response => {
        response.data.items.map(item => {
          item.showClose = false
        })
        this.dialogData.subject = response.data.items
        this.dialogData.total = response.data.total
      })
    },
    getData() {
      getSelections(getTenantId()).then(response => {
        response.data.items.map(item => {
          item.showClose = false
        })
        this.classData = response.data.items
      })
    },
    saveInfo() {
      this.classData.userId = getUserId()
      this.classData.tenantId = getTenantId()
      saveSelections(this.classData).then(response => {
        this.$notify({
          title: '成功',
          message: '提交成功！',
          type: 'success',
          duration: 2000
        })
      })
    }
  }
}
</script>

<style lang="scss">
.week {
  .week-head {
    background-color: #f8f8f8;
    width: 100%;
    height: 38px;
    line-height: 38px;
    padding-left: 20px;
  }
  .el-dialog {
    border-radius: 5px;
    width: 600px;
    height: 660px;
    .class-pagination {
      width: 100%;
      text-align: center;
      margin-top: 30px;
    }
    .search {
      width: 100%;
      height: 36px;
    }
  }
  .week-main {
    height: 200px;
    width: 100%;
    margin-top: 20px;
    .week-button {
      float: left;
      width: 200px;
      height: 200px;
      margin-right: 30px;
      position: relative;
      .el-icon-circle-plus {
        width: 150px;
        height: 150px;
        font-size: 70px;
        padding-top: 40px;
      }
    }
    .week-img {
      float: left;
      margin-right: 30px;
      .grid-body {
        cursor: pointer;
        position: relative;
        width: 200px;
        display: block;
        border-radius: 4px;
        color: #353535;
        height: 200px;
        .img {
          width: 100%;
          height: auto;
          opacity: 0.9;
        }
        .title {
          display: block;
          padding: 10px;
          min-height: 52px;
          color: #555;
          font-weight: bold;
        }
        .el-icon-error {
          font-size: 22px;
          position: absolute;
          right: -10px;
          top: -10px;
          z-index: 99;
          opacity: 0.8;
        }
        .el-icon-error:hover {
          opacity: 1;
        }
      }
    }
  }
}
</style>
